import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/finally';
import { Hero } from './data-model';
import { HeroService } from './hero.service';

@Component( {
    selector: 'app-reactiveform',
    templateUrl: './reactiveform.component.html',
    styleUrls: ['./reactiveform.component.css']
} )
export class ReactiveformComponent implements OnInit {

    heroes: Observable<Hero[]>;
    isLoading = false;
    selectedHero: Hero;

    constructor( private heroService: HeroService ) {

    }
    getHeroes() {
        this.isLoading = true;
        this.heroes = this.heroService.getHeroes()
            // Todo: error handling
            .finally(() => this.isLoading = false );
        this.selectedHero = undefined;
    }

    select( hero: Hero ) { this.selectedHero = hero; }

    ngOnInit() {
        this.getHeroes();
    }

}
